{% extends "base_grid.html" %}
{% block script %}
jQuery(document).ready(function(){

	var mygrid = jQuery("#tableList").jqGrid({
		//url : '/grid.do', //데이터 유알엘
		url : '/account/list/', //데이터 유알엘
		datatype : 'xml', //데이터 타입은 xml ,json , custom type 
		mtype : 'POST', //파라메터를 넘길때 get or post
		//width : 800, // 그리드 너비
		autowidth:true,
		height: 250, // 그리드 높이

		// colModel 은 컬럼과 일치한 데이터의 집합을 그리드
		// xmlReader 와 연계된다 
		// name  : 유니크한 컬럼 네임을 설정
		// index : 정렬시 index 이름으로 sort 한다
		// width : height : 그리드 너비, 높이
		// xmlmap : xmlReader 와 연계되는 키값 셋팅된 노드의 데이터를 그리드한다. 
		colModel : [
		            {label : 'id', index : 'id', name:"id", width : '30', xmlmap : "id", hidden:false},
		            {label:'계정코드', name : "account_code", index : 'account_code', width : '70', xmlmap : "account_code"},
		            {label : '계정명', name:"account_name", index : 'account_name', width : '70', xmlmap : "account_name"},
		            {label : '사용', name:"use_yn", index : 'use_yn', width : '30', xmlmap : "use_yn"},
		            {label : '생성일', name:"cdate", index : 'cdate', width : '70', xmlmap : "cdate"},
		            {label : '수정일', name:"udate", index : 'udate', width : '70', xmlmap : "udate"},
		            {label : "삭제일", name:"ddate", index : 'ddate', width : '70', xmlmap : "ddate"},
					],

		//xml 데이터를 그리드에 뿌려줄때 구현
		xmlReader: { 
		      root:"result", 
		      row:"row",
		      page:"page", 
		      total:"total", 
		      records:"records",
		      repeatitems:false,
		      id : "id"
		  },
							
	   	pager: "#pager", //페이징부분을 설정
	    rowNum: 10, // 기본적으로 뿌려줄 행 갯수 (int)
		toolbar:[true, "both"],
	    
	    rowList:[10,20,30], //다수의 행을 그리드내에서 뿌려줄때 설정된다. (int)
	    rownumbers: true, //컬럼앞에 행 번호를 찍어준다 (true, false)
	    rownumWidth: 20, //행번호를 출력할 시 행번호 컬럼의 너비 조정
	    sortname: 'id', // 정렬시 디폴트 로 찍어줄 값 (column index)
	    sortorder: "desc", //정렬시 내림차순, 오름차순 (asc , desc)
	    gridview : true, // 번역안됨..
	    viewrecords: true, //이거한하면 그드에 데이터 안나옴...
	    imgpath: 'themes/redmond/images', //그리드 스타일시트 경로 (jquery-ui theme 를 사용)
	    caption: 'Account', //그리드상단에 출력되는 캡션
	   	multiselect: false, //다중 선택 (true, false)
	   	hiddengrid : false, //시작시 그리드를 숨겨있는 상태로
	   	hidegrid: true, //숨김버튼 표시
	   	loadui: "block", //페이징시 화면 을 검게..(검색중을 시각화..)
	   	postData:{flag:0}, //flag
	   	sortable: true, // column reordering

        onSelectRow:function(rowId){

            kk = $("#tableList")

            oo = kk.jqGrid('getRowData', rowId);
            alert(oo.acct_code);


            //alert(kk.getCell(rowId, kk.getCellIndex("acct_name")));
            //alert(oo.jqGrid('getCell', rowId, 2));

        }


   })
	   //페이징 영역에 기능버튼을 삽입하거나 뺄수있다
	   .navGrid('#pager',{edit:false,add:false,del:false,search:true,refresh:false}) 
	
	
	// 토글기능을 이용한 ajax 검색 서칭기능을 구현
	.navButtonAdd("#pager",{caption:"검색",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s',
	onClickButton:function(){
		mygrid[0].toggleToolbar();
	}})
	.navButtonAdd("#pager",{caption:"검색초기화",title:"Clear Search",buttonicon :'ui-icon-refresh',
	onClickButton:function(){
		mygrid[0].clearToolbar();
	}})
	.navSeparatorAdd("#pager", {})
	.navButtonAdd("#pager",{caption:"Columns",title: "Reorder Columns",buttonicon :'ui-icon-newwin' ,onClickButton : function (){
		   $("#tableList").setColumns();
		   return false; 
	}})

	.navButtonAdd("#pager",{caption:"Excel",title: "Export Excel",buttonicon :'ui-icon-document-b' ,onClickButton : function (){
		
	    var gsr = $("#tableList").jqGrid('getGridParam','colNames');
	    var gsl = $("#tableList").jqGrid('getGridParam','colModel');
	    var oo = $("#tableList").jqGrid('getPostData');
		var colNames = "";	
		var colMaps = "";
		$("<form id='excel' action='<%=root%>/grid.do' method='post'/>").appendTo("body");
	
		$("#excel").append("<input type='hidden' id='flag' name='flag' value='6'/>");

		for(var i=1; i < gsr.length; i++)
		{

			var temp = gsr[i];
			var temp1 = gsl[i].xmlmap;
			if(i != gsr.length -1){
				colNames += temp + ",";
				colMaps += temp1 + ",";
			}
			else{
				colNames += temp;
				colMaps += temp1;
			}

			
			if(eval("oo." + gsl[i].index)){
				$("#excel").append("<input type='text' id='"+gsl[i].index+"' name='"+gsl[i].index+"' value='" +  eval("oo." + gsl[i].index) + "' />");
			}
			
		}	

		$("#excel").append("<input type='hidden' id='colNames' name='colNames' value='"+colNames+"'/>");
		$("#excel").append("<input type='hidden' id='colMaps' name='colMaps' value='"+colMaps+"'/>");
		$("#excel").append("<input type='hidden' id='fileName' name='fileName' value='"+$("#tableList").jqGrid('getGridParam','caption')+"'/>");
		$("#excel").submit();
		$("#excel").remove();

		return false; 
    }})
	;



	//jQuery("#korea").jqGrid('navGrid','#okok',{edit:false,add:false,del:false}); 

	$("#t_tableList").css("text-align", "right");

	$("#t_tableList").append("<input type='button' value='Click Me'/>"); 
	$("#t_tableList").append("<input type='button' value='query'/>"); 

	$("input","#t_tableList").click(function(){ alert("Hi! I'm added button at this toolbar"); }); 


	//mygrid.togglerToolbar();
	//mygrid.filterToolbar();
});

{% endblock %}


{% block body %}

{#%for i in account%} {{i.acct_name|length }}<br/>{%endfor%#}

<div id="divGrid" style="margin:20px">
	<table id="tableList" class="scroll" ></table>
	<div id="pager" class="scroll"></div>
	<div id="toolbar"/>
</div>
{% endblock %}
